Tengo mi etiqueta p que se supone que cambia el texto cuando activa el evento mouseover pero de alguna manera obtuve [objeto MouseEvent] a cambio y no el texto.
HTML
<p id="album-name-1" onmouseover="changeText('follow me around, greatest song of the album!')"> change the text </p>JS
var par = document.querySelector("#album-name-1"); par.addEventListener("mouseover", changeText); function changeText(text) { if (this.id === "album-name-1") { par.innerHTML = text; } }Quería hacer esto con el uso de la palabra clave "esto" , pero de alguna manera no funciona como esperaba. ¿Alguna sugerencia?
Es porque está agregando un detector de eventos de mouseover con addEventListener , y el primer parámetro de la devolución de llamada es el evento.
En su lugar, puede pasar this como un parámetro dentro del atributo onmouseover .
var par = document.querySelector("#album-name-1"); function changeText(elem, text) { if (elem.id === "album-name-1") { par.innerHTML = text; } } <p id="album-name-1" onmouseover="changeText(this, 'follow me around, greatest song of the album!')"> change the text </p>No utilice atributos de eventos. Están llenos de peculiaridades difíciles de depurar y te morderán algún día.
En cambio, si realmente desea tener ese texto en el marcado, guárdelo en un atributo de data- y recupérelo de su controlador de eventos, que adjuntó a través de addEventListener .
var par = document.querySelector("#album-name-1"); par.addEventListener("mouseover", changeText); function changeText(evt) { // first param is the Event object if (this.id === "album-name-1") { // 'this' is the current target // all the data- attributes of our element // are stored in its .dataset property par.innerHTML = this.dataset.text; } } <p id="album-name-1" data-text="follow me around, greatest song of the album!"> change the text </p>